<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />

  <title>Websanova :: wPaint</title>

  <!-- filestart -->
  <link rel="icon" type="image/vnd.microsoft.icon" href="./demo/img/favicon.ico" />
  <link rel="Stylesheet" type="text/css" href="./demo/demo.css" />
  <!-- fileend -->
  <style>
    .wpaint-scroll-wrapper{
      position: relative;
      padding-top: 40px;
      width: 620px;
    }
    .wpaint-scroll {
      max-height: 500px;
      overflow: auto;
    }

    #wPaint,#wPaint1 {
      position: relative;
      width: 80%;
      height: 80%;
      margin: 0px auto;
      background-size: contain;
    }

  </style>
</head>

<body>
  <script src="./components/uPaint.js"></script>
  <div>

    <div class="content-box">

      <link rel="stylesheet" href="wPaint-min.css">
      <script src="wPaint-min.js"></script>
      <div class="wpaint-scroll-wrapper">
        <div class="wpaint-scroll">
          <div id="wPaint"></div>
        </div>
      </div>
      
      <button id="rotate">初始化</button>
      <button id="rotate1">销毁</button>
      <button id="save">save</button>
      <a href="https://leicloud.ulearning.cn/resources/834414/202007211522175452.jpg?imageslim|imageMogr2/rotate/270|watermark/1/image/aHR0cHM6Ly9sZWljbG91ZC51bGVhcm5pbmcuY24vcmVzb3VyY2VzLzgzNDQyMC8yMDIwMDcyMjEzMzUwMjUzNzEuanBn/dx/0/dy/0?attname=111.jpg" download="111.jpg" target="_blank">下载</a>
      <script type="text/javascript">
        var images = [
          '/test/uploads/wPaint.png',
        ];
        function saveImg(image) {
          $("#result").attr('src', image)
        }
        var img1 = 'https://leicloud.ulearning.cn/resources/834420/202001031716415731.jpg'
        var img2 = 'https://leicloud.ulearning.cn/resources/834420/201902281320225428.jpg'
        var img3 = 'https://leicloud.ulearning.cn/resources/834420/202007091524463762.jpg'
        // var img3 = 'https://leicloud.ulearning.cn/homework/pc/834414/15895203660961046.jpg'
        var markedImage = 'https://leicloud.ulearning.cn/resources/834420/20200716161326307.jpg'
        $('#rotate').on('click', function () {
          init('wPaint')
        })

        $('#rotate1').on('click', function () {
          paint.destory()
        })
        $('#save').on('click', function () {
          var data = {
            originalImage: paint.originalImage,
            markedImage: paint.markedImage,
            angle: paint.angle
          }
          console.log(data)
          window.localStorage.setItem('paint',JSON.stringify(data))
        })

        var imgeditId = "wPaint"
        var MAX_WIDTH = 600
        function initPaint(url, ) {
          var img = new Image()
          img.src = url
          img.onload = function (data) {
            var width = this.width
            var height = this.height
            if (width > MAX_WIDTH) {
              height = height / width * MAX_WIDTH
              width = MAX_WIDTH
            }

            $('#wPaint').css({'width': width + 'px', 'height': height + 'px','background-image':'url(' + url + ')'})
            var config = {
              menuOffsetTop: -50,
              saveImg: saveImg,
              imageStretch: true
            }
            $('#wPaint').wPaint(config);
          }
        }

        function init (id) {
          var  paintData = window.localStorage.getItem('paint')
          var data = paintData ? JSON.parse(paintData) : {}
          window.paint = new uPaint({
            domId:id,
            originalImage: data.originalImage || img3,
            markedImage: markedImage,
            angle: data.angle || 0,
            path: '/',
            MAX_WIDTH: 600
          })
        }
        // init()
        
        // initPaint(img3)



        var editAngle = 0
        var imgSrc = img3
        function rotateImg(editAngle) {
          const self = this
          if (self.isRotating) return
          self.isRotating = true
          var rotateAngle = editAngle
          editAngle = self.editAngle + editAngle
          if (editAngle < 0) {
            editAngle += 360
          }
          if (editAngle >= 360) {
            editAngle -= 360
          }
          self.editAngle = editAngle
          self.imgSrc = self.imgSrc.split('?')[0] + '?imageslim|imageMogr2/rotate/' + editAngle
          var img = new Image()
          img.src = self.imgSrc
          img.onload = function () {
            var width = this.width
            var height = this.height
            if (width > MAX_WIDTH) {
              height = height / width * MAX_WIDTH
              width = MAX_WIDTH
            }
            
            $('#wPaint').width(width).height(height).css('background-image', 'url(' + self.imgSrc + ')')
            var imageData = $('#' + self.imgeditId).wPaint('image')

            setTimeout(function () {
              self.rotateBase64Img(imageData, rotateAngle, function (image) {
                self.base64imgData = image
                $('#' + self.imgeditId).wPaint('clear')
                $('#' + self.imgeditId).wPaint('resize')
                $('#' + self.imgeditId).wPaint('image', self.base64imgData)
                self.isRotating = false
              })
            })
          }
          // if (editAngle / 90 % 2 === 1) {
          //   self.initCanvasSize(self.defaultSize.height, self.defaultSize.width)
          // } else {
          //   self.initCanvasSize(self.defaultSize.width, self.defaultSize.height)
          // }

          
        }
        function rotateBase64Img(src, edg, callback) {
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          var imgW // 图片宽度
          var imgH // 图片高度
          var size // canvas初始大小
          if (edg % 90 !== 0) {
            console.error('旋转角度必须是90的倍数!')
            return -1
          }
          (edg < 0) && (edg = (edg % 360) + 360)
          const quadrant = (edg / 90) % 4 // 旋转象限
          const cutCoor = {
            sx: 0,
            sy: 0,
            ex: 0,
            ey: 0
          } // 裁剪坐标
          var image = new Image()
          image.crossOrigin = 'anonymous'
          image.src = src
          image.onload = function () {
            imgW = image.width
            imgH = image.height
            size = imgW > imgH ? imgW : imgH
            canvas.width = size * 2
            canvas.height = size * 2

            switch (quadrant) {
              case 0:
                cutCoor.sx = size
                cutCoor.sy = size
                cutCoor.ex = size + imgW
                cutCoor.ey = size + imgH
                break
              case 1:
                cutCoor.sx = size - imgH
                cutCoor.sy = size
                cutCoor.ex = size
                cutCoor.ey = size + imgW
                break
              case 2:
                cutCoor.sx = size - imgW
                cutCoor.sy = size - imgH
                cutCoor.ex = size
                cutCoor.ey = size
                break
              case 3:
                cutCoor.sx = size
                cutCoor.sy = size - imgW
                cutCoor.ex = size + imgH
                cutCoor.ey = size + imgW
                break
            }
            ctx.translate(size, size)
            ctx.rotate(edg * Math.PI / 180)
            ctx.drawImage(image, 0, 0)
            var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
            console.log(cutCoor)
            $('body').append(canvas)
            if (quadrant % 2 === 0) {
              canvas.width = imgW
              canvas.height = imgH
            } else {
              canvas.width = imgH
              canvas.height = imgW
            }
            ctx.putImageData(imgData, 0, 0)
            callback(canvas.toDataURL())
          }
        }
      </script>
    </div>
  </div>

</body>

</html>